<template>
  <!-- 规则草图识别页面 -->
  <div class="ruleSketch">
    <!-- 标题 -->
    <div class="title">
      <ul>
        <li class="act">规则草图识别</li>
      </ul>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="con">
        <!-- 检索表单 -->
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item>
            <el-input clearable v-model="form.inputVal" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" style="background-color: #4271c4; color: #fff; font-size: 20px" icon="el-icon-search"
              @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- 表格内容 -->
        <el-table height="75vh" :data="tableData" style="width: 100%">
          <!-- <el-table-column type="selection" width="55"> 
          </el-table-column>-->
          <el-table-column label="序号" width="80">
            <template slot-scope="scope">
              <span v-text="getIndex(scope.$index)"> </span>
            </template>

          </el-table-column>
          <el-table-column prop="fileName" label="文件名称"> </el-table-column>
          <el-table-column prop="mblx" label="模板类型"> </el-table-column>
          <el-table-column prop="jb" label="级别"> </el-table-column>
          <el-table-column prop="sx" label="属性"> </el-table-column>
          <el-table-column prop="static" label="状态">
            <template slot-scope="scope">
              <span style="color:#FF2819" v-if="scope.row.static == 1">未识别</span>
              <span style="color:#08ABB5" v-else-if="scope.row.static == 2">已识别</span>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="时间"> </el-table-column>
          <el-table-column prop="dec" label="描述"> </el-table-column>
          <el-table-column prop="dec" label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row, '5')" type="text" size="small"
                style="text-decoration:underline">查看</el-button>
              <el-button @click="handleClick(scope.row, '3')" type="text" size="small"
                style="color:red;text-decoration:underline">删除</el-button>

              <!-- 详情页弹窗 -->
              <!-- 弹窗 -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination style="margin-top: 5px; float: right;background: #fff;" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20, 25, 30, 35, 40]"
          :page-size="pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="草图识别" class="identify" :visible.sync="identifyDialogVisible" width="80%" center>
      <div class="identify-b" style="flex-direction:column" v-if="staticValue == 1">
        <!-- <span>草图:</span> -->
        <div class="box box1" style="height: 500px;margin: 0 auto;">
          <img style="width:763px;height:460px;margin: 0 auto;" src="@/assets/shibie1.png" alt="">
        </div>
        <p style="color:red;text-align:center;width:100%;padding:57px 0">草图识别失败</p>
      </div>
      <!-- <div class="progress">
        <el-progress :percentage="percentage" :color="customColor"></el-progress>
      </div> -->

      <div class="identify-b" v-else-if="staticValue == 2">
        <span class="label">识别结果:</span>
        <div class="box box2">
          <img style="width:328px;height:327px;margin:0 auto" src="@/assets/shibie2.png" alt="">
        </div>
        <span class="label" style="margin-left: 47px;">文件格式:</span>
        <div class="box box3">
          <div class="file">****.json</div>
        </div>
        <!-- 识别结果 -->
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="identifyDialogVisible = false">保 存</el-button>
        <el-button @click="identifyDialogVisible = false">取 消</el-button>

      </span> -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      // 表单检索字段
      form: {
        lxId: "",//类型id
        jbId: "",//级别id
        inputVal: "",//关键字
      },
      // 表格渲染数据
      allData: [],
      tableData: [],
      filterList: [],//下来筛选后的数据
      currentPage: 1,//当前页码数
      pageSize: 10,//每页显示条数
      total: 0,

      // 弹窗回显数据
      formList: {
        gxId: '',
        gzName: '',
        sj: '',
        bm: '',
        bq: '',
        dec: ''
      },
      multipleSelection: [],
      isDisable: "1",
      dialogTitle: '详情',
      identifyDialogVisible: false,//草图识别弹窗
      loading: false,
      percentage: 20,
      customColor: '#08abb5',
      staticValue: 0//1 识别失败 2 识别成功
    }
  },
  mounted () {
    setTimeout(() => {
      this.percentage = 35
    }, 1000)
    setTimeout(() => {
      this.percentage = 75
    }, 2000)
    setTimeout(() => {
      this.percentage = 100
      this.loading = false
    }, 3000)
    // 手动获取表格数据
    this.allData = [
      {
        id: 1,
        lxId: 'jpg',
        fileName: "文件1",
        mblx: "JPG",
        jb: "一级",
        jbId: "yiji",
        static: 1,
        sx: "图片",
        time: "2017-02-23",
        dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
      },
      {
        id: 2,
        lxId: 'png',
        fileName: "文件2",
        mblx: "PNG",
        jb: "二级",
        jbId: "erji",
        static: 1,
        sx: "图片",
        time: "2017-02-23",
        dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
      },
      {
        id: 3,
        lxId: 'xml',
        fileName: "文件3",
        mblx: "Xml",
        jb: "三级",
        jbId: "sanji",
        static: 2,
        sx: "图片",
        time: "2017-02-23",
        dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
      }, {
        id: 4,
        lxId: 'jpg',
        fileName: "文件4",
        mblx: "JPG",
        jb: "一级",
        jbId: "yiji",
        static: 2,
        sx: "图片",
        time: "2017-02-23",
        dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
      },
      {
        id: 5,
        lxId: 'jpg',
        fileName: "文件5",
        mblx: "JPG",
        jb: "一级",
        jbId: "yiji",
        static: 1,
        sx: "图片",
        time: "2017-02-23",
        dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
      },
      {
        id: 6,
        lxId: 'jpg',
        fileName: "文件6",
        mblx: "JPG",
        jb: "一级",
        jbId: "yiji",
        static: 1,
        sx: "图片",
        time: "2017-02-23",
        dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
      }, {
        id: 7,
        lxId: 'jpg',
        fileName: "文件7",
        mblx: "JPG",
        jb: "一级",
        jbId: "yiji",
        static: 2,
        sx: "图片",
        time: "2017-02-23",
        dec: "xxxxxxxxxxxxxxxxxxxxxxxx",
      },
    ]
    this.getCurrentPageData(this.allData, this.pageSize, this.form.id, this.currentPage)
  },
  computed: {

  },
  watch: {
    pageSize: {
      handler (val) {
        this.getCurrentPageData(this.allData, val, this.form.id, this.currentPage)
      }
    },
    currentPage: {
      handler (val) {
        this.getCurrentPageData(this.allData, this.pageSize, this.form.id, val)
      }
    }
  },
  methods: {
    // 关于分页=====================
    // 处理分页序号
    getIndex ($index) {
      return (this.currentPage - 1) * this.pageSize + $index + 1
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 获取当前页的数据
    getCurrentPageData (dataList, pageSize, id, curPage) {
      console.log(dataList, pageSize, id, curPage, 'dataList, pageSize, id, curPage')
      const start = (curPage - 1) * pageSize
      const end = start + pageSize
      this.filterList = dataList
      this.total = this.filterList.length
      this.tableData = dataList.slice(start, end)
      return dataList.slice(start, end)
    },
    // 每页显示条数改变事件
    handleSizeChange (size) {
      this.pageSize = size
    },
    // 当前页码数改变事件
    handleCurrentChange (curPage) {
      console.log(curPage)//当前页码数
      this.currentPage = curPage
    },
    // 点击检索
    onSubmit () {
      // 这里我是要根据类型，名字，所属实现模糊查询，需要什么就在filter里的if中加
      // 这里要用 toLowerCase()  把你输入的全部换成小写，可以更好的模糊查询
      let newList = []
      let _search = this.form.inputVal.toLowerCase()
      if (_search) {
        this.filterList.filter((item) => {
          if (
            item.fileName.toLowerCase().indexOf(_search) !== -1 ||
            item.time.toLowerCase().indexOf(_search) !== -1
          ) {
            newList.push(item)
          }
        })
        this.getCurrentPageData(newList, this.pageSize, this.form.id, this.currentPage)
      } else {
        this.getCurrentPageData(this.allData, this.pageSize, this.form.id, this.currentPage)
      }

    },
    // 关于弹窗================================
    // 关于表格操作事件
    handleClick (data, num) {
      this.dialogVisible = true
      switch (num) {
        case "1":
          // 详情
          this.dialogTitle = "详情"
          this.isDisable = "1"
          this.formList = data
          break
        case "2":
          // 修改
          this.isDisable = "2"
          this.dialogTitle = "修改"
          this.formList = data
          this.tableData.map((i) => {
            if (i.id == data.id) {
              i = this.formList
            }
          })
          break
        case "3":
          // 删除
          this.dialogVisible = false
          this.$alert("确认删除文件名为" + data.fileName + "这条数据吗？", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.tableData.map((i, index) => {
                if (i.id == data.id) {
                  this.allData.splice(index, 1)
                }
              })
              this.getCurrentPageData(
                this.allData,
                this.pageSize,
                this.form.id,
                this.currentPage
              )
              this.$message({
                type: "success",
                message: "删除成功！",
              })
            },
          })
          break
        case "4":
          // 详情
          this.dialogTitle = "新增"
          this.isDisable = "2"
          // this.formList = data
          break
        case "5"://草图识别
          console.log(data, 'data')
          this.staticValue = data.static
          this.identifyDialogVisible = true
          break
        default:
          break
      }
    },

    handleClose () {
      this.dialogVisible = false
    }
  },
}
</script>

<style lang="less" scoped>
.ruleSketch {
  .title {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #fff;
    border-bottom: 2px solid #707070;

    ul {
      width: 10%;
      height: 99.9%;
      display: flex;
      justify-content: space-around;

      li {
        cursor: pointer;
        padding: 0 10px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 500;
      }

      .act {
        color: #05acb5;
        border-bottom: 2px solid #05acb5;
      }
    }
  }

  .content {
    padding: 10px;
    box-sizing: border-box;

    .con {
      width: 100%;
      background: #fff;
      padding: 20px 15px 40px;
      box-sizing: border-box;
    }
  }
}
</style>
<style>
.identify .identify-b {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.identify span.label {
  width: 70px;
  text-align: right;
  margin-right: 20px;
  font-size: 16px;
  color: #000000;

}

.identify .box {

  padding: 10px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
  border-radius: 10px;

}

.identify .progress {
  width: 683px;
  margin: 15px auto;
  /* border: 1px solid #707070;
  border-radius: 20px;
  padding: 3px; */
}

.identify .box1 {
  width: 1300px;

  text-align: center;
}

.identify .box2 {
  width: 630px;
  height: 354px;

}

.identify .box3 {
  width: 530px;
  height: 354px;
}

.identify .box3 .file::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 25px;
  background-image: url('../assets/24gf-fileText.png');
  margin: 10px;
  vertical-align: middle;
}
</style>